---
import { Image } from 'astro:assets'

interface friend {
  avatar: string
  name: string
  intro: string
  link: string
}

interface friend_list {
  id_name: string
  desc: string
  link_list: friend[]
}

function shuffle(arr: friend[]) {
  return arr.sort(function () {
    return Math.random() - 0.5
  })
}

interface Props {
  title?: string
  list: friend_list
}
const { title, list: friendList, ...props } = Astro.props
---

{title && <h2 id={friendList.id_name}>{title}</h2>}
<div class='grid gap-3.5 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3' {...props}>
  {
    friendList.link_list.length > 0 ? (
      shuffle(friendList.link_list).map((frd: friend) => (
        <a href={frd.link} target='_blank' class='no-underline'>
          <div class='group relative h-full overflow-hidden rounded-2xl border bg-background px-2.5 py-1.5 transition-colors hover:bg-muted sm:px-4 sm:py-2'>
            <div class='relative z-10 flex h-full items-center gap-3'>
              {/* avatar */}
              <div class='relative h-14 w-14 min-w-14 overflow-hidden rounded-full'>
                <Image
                  class='my-0 bg-white'
                  src={frd.avatar}
                  height={80}
                  width={80}
                  alt='avatar'
                  loading='lazy'
                />
                <div class='absolute start-0 top-0 h-full w-full'>
                  <div class='flex h-full w-full items-center justify-center rounded-full bg-foreground opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-50'>
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      width='32'
                      height='32'
                      viewBox='0 0 24 24'
                      fill='none'
                      stroke-width='2.5'
                      stroke-linecap='round'
                      stroke-linejoin='round'
                      class='me-2 stroke-background'
                    >
                      <line
                        x1='5'
                        y1='12'
                        x2='19'
                        y2='12'
                        class='translate-x-4 scale-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:scale-x-100'
                      />
                      <polyline
                        points='12 5 19 12 12 19'
                        class='translate-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1'
                      />
                    </svg>
                  </div>
                </div>
              </div>
              {/* details */}
              <div class='flex flex-col gap-y-1'>
                <p class='my-0 line-clamp-1 text-sm'>{frd.name} </p>
                <p class='my-0 line-clamp-1 text-xs text-muted-foreground'>{frd.intro}</p>
              </div>
            </div>
            {/* avatar bg */}
            <Image
              class='absolute -start-2 top-0 z-0 my-0 h-full w-2/3 bg-white object-cover opacity-15'
              src={frd.avatar}
              height={80}
              width={80}
              alt='avatar bg'
              loading='lazy'
              style={{
                maskImage: 'linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)',
                msMaskImage:
                  '-ms-linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)',
                WebkitMaskImage:
                  '-webkit-linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)'
              }}
            />
          </div>
        </a>
      ))
    ) : (
      <p>Nothing here.</p>
    )
  }
</div>
